<template>
    <div>
        <!-- 反担保信息录入:rzFdbxxlr -->
        <div class="w_100 headTips d_f j_c_s_b" @click="resultData">
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
            <el-button type="primary" v-if="type == 'useForm' && isReset == 1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox rzFdbxxlr">
            <div class="headTips d_f a_i_c">
                <span class="tips">反担保物（{{ length }}个）</span>
                <div class="add d_f j_c_c a_i_c" @click="addHours" v-if="!isAudit">
                    <span class="size">+</span>
                    <span>添加房产</span>
                </div>
                <div class="add d_f j_c_c a_i_c" @click="addShareholding" v-if="!isAudit">
                    <span class="size">+</span>
                    <span>添加股权</span>
                </div>
                <div class="add d_f j_c_c a_i_c" @click="addCharging" v-if="!isAudit">
                    <span class="size">+</span>
                    <span>添加收费权</span>
                </div>
            </div>
            <template v-for="(item, index) in model.counterGuaranteeMessage.property">
                <div class="d_f j_c_s_b m_t_20">
                    <div class="formArrow d_f a_i_c ">
                        <img src="../../assets/formArrow.png" alt="">
                        <span>房产{{ index + 1 }}</span>
                    </div>
                    <div class="error" @click="deleteHours(index)" v-if="!isAudit"> 删除</div>
                </div>
               <div class="realEstate_form">
                <myform :fields="fields" ref="form" :rules="rules" :model="item" :options="options" class="m_t_20">
                </myform>
               </div>
            </template>
            <template v-for="(item, index) in model.counterGuaranteeMessage.equity">
                <div class="d_f j_c_s_b m_t_20">
                    <div class="formArrow d_f a_i_c ">
                        <img src="../../assets/formArrow.png" alt="">
                        <span>股权{{ index + 1 }}</span>
                    </div>
                    <div class="error" @click="deleteShareholding(index)" v-if="!isAudit">删除</div>
                </div>
                <div class="shareholding_form">
                    <myform :fields="fields1" ref="form" :rules="rules1" :model="item" :options="options" class="m_t_20">
                    </myform>
                </div>
            </template>
            <template v-for="(item, index) in model.counterGuaranteeMessage.charging">
                <div class="d_f j_c_s_b m_t_20">
                    <div class="formArrow d_f a_i_c ">
                        <img src="../../assets/formArrow.png" alt="">
                        <span>收费权{{ index + 1 }}</span>
                    </div>
                    <div class="error" @click="deleteCharging(index)" v-if="!isAudit">删除</div>
                </div>
               <div class="shareholding_form">
                <myform :fields="fields2" ref="form" :rules="rules2" :model="item" :options="options" class="m_t_20">
                </myform>
               </div>
            </template>
            <div class="headTips d_f a_i_c m_t_16">
                <span class="tips">第三方保证（{{ model.counterGuaranteeMessage.third.length }}个）</span>
                <div class="add d_f j_c_c a_i_c" @click="addThirdParty" v-if="!isAudit">
                    <span class="size">+</span>
                    <span>添加</span>
                </div>
            </div>
            <template v-for="(item, index) in model.counterGuaranteeMessage.third">
                <div class="d_f j_c_s_b m_t_20">
                    <div class="formArrow d_f a_i_c ">
                        <img src="../../assets/formArrow.png" alt="">
                        <span>第三方保证{{ index + 1 }}</span>
                    </div>
                    <div class="error" @click="deleteThirdParty(index)" v-if="!isAudit">删除</div>
                </div>
                <myform :fields="fields3" ref="form" :rules="rules3" :model="item" :options="options" class="m_t_20">
                    <template v-slot:area>
                        <el-cascader v-model="item.area" :disabled="isAudit" placeholder="请选择所属区域" :options="districts"
                            :props="areaProps" />
                    </template>
                </myform>
            </template>
            <div class="headTips d_f a_i_c m_t_16">
                <span class="tips">个责（{{ model.counterGuaranteeMessage.personalLiability.length }}个）</span>
                <div class="add d_f j_c_c a_i_c" @click="addResponsibility" v-if="!isAudit">
                    <span class="size">+</span>
                    <span>添加</span>
                </div>
            </div>
            <template v-for="(item, index) in model.counterGuaranteeMessage.personalLiability">
                <div class="d_f j_c_s_b m_t_20">
                    <div class="formArrow d_f a_i_c ">
                        <img src="../../assets/formArrow.png" alt="">
                        <span>个责{{ index + 1 }}</span>
                    </div>
                    <div class="error" @click="deleteResponsibility(index)" v-if="!isAudit">删除</div>
                </div>
                <myform :fields="fields4" ref="form" :rules="rules4" :model="item" :options="options" class="m_t_20">
                </myform>
            </template>
            <div class="headTips d_f a_i_c m_t_16">
                <span class="tips">其他（{{ model.counterGuaranteeMessage.otherList.length }}个）</span>
                <div class="add d_f j_c_c a_i_c" @click="addOther" v-if="!isAudit">
                    <span class="size">+</span>
                    <span>添加</span>
                </div>
            </div>
            <template v-for="(item, index) in model.counterGuaranteeMessage.otherList">
                <div class="d_f j_c_s_b m_t_20">
                    <div class="formArrow d_f a_i_c ">
                        <img src="../../assets/formArrow.png" alt="">
                        <span>其他{{ index + 1 }}</span>
                    </div>
                    <div class="error" @click="deleteOther(index)" v-if="!isAudit">删除</div>
                </div>
                <div class="fields5">
                    <myform :fields="fields5" ref="form"  :model="item" :options="options"
                        class="m_t_20">
                    </myform>
                </div>
            </template>
            <div class="segment" v-if="fields6.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields6.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div v-if="fields6.length > 0">
                <myform :fields="fields6" :model="model.counterGuaranteeMessage" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref, watch } from 'vue'
import { rzFdbxxlrType } from './data'
import { CloseBold } from '@element-plus/icons-vue'
import { copy } from '../../utils/date'
import { formGet, unitFormSet } from '../../api/system/flowPath'
import { listByParentArr, dictDetailAll } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { useRouter } from 'vue-router'
import { MONER_REG, NUMENGLISH_REG, NUMBRT_REG, PHONE_REG } from '../../utils/regular'
const model = {
    counterGuaranteeMessage: {
        property: [
            // {
            //     mortgager: '抵押人名称',//抵押人名称
            //     customerType: '1',//抵押人类型1-自然人，2-法人
            //     legalPerson: '法定代表人',//法定代表人
            //     useRight: '土地使用权取得方式',//土地使用权取得方式
            //     useType: '用途',//用途
            //     structure: '结构',//结构
            //     contactAddress: '通讯地址',//通讯地址
            //     propertyAddress: '房产地址',//房产地址
            //     area: '10',//面积
            //     negotiateValue: '10',//协商价值
            //     mortgageRate: '10',//抵押率
            //     mortgageValue: '10',//抵押价值
            //     propertyCode: '产权',//产权
            //     insurance: '保险',//保险
            //     notary: '保险',//公证
            //     mortgageRight: '抵押权',//抵押权
            //     useMode: '',//房屋使用情况
            //     remark: '',//备注
            // }
        ],
        third: [
            // {
            //     companyName: '公司名称',//公司名称
            //     area: '',//所属区域
            //     relation: '关系说明',//关系说明
            //     registeredCapital: '20',// 公司注册资本
            //     legalPerson: '法人姓名',//法人姓名
            //     relationPerson: '联系人',//联系人
            //     mobile: '173',//联系人手机号
            //     address: '083',//通讯地址
            // }
        ],
        equity: [
            // {
            //     mortgager: '抵押人名称',//抵押人名称 
            //     cardNo: '5111',//身份证号/统一社会信用代码
            //     mobile: '1731170115',//联系电话
            //     sellNumber: '20',//出质股权股数
            //     equityCompanyOwner: '股权所属公司',//股权所属公司
            //     address: '通讯地址',//通讯地址
            //     remark: '',//备注
            // }
        ],//股权
        charging: [
            // {
            //     mortgager: '10',//抵押人名称
            //     customerType: '1',////抵押人类型1-自然人，2-法人
            //     legalPerson: '法人姓名',//法人姓名
            //     evaluate: '10',//评估值
            //     mode: '担保方式',//担保方式
            //     ownershipCertificate: '10',//权属证书及编号
            //     address: '地址',//地址
            //     remark: '',//备注
            // }
        ],

        personalLiability: [
            // {
            //     name: '反担保人姓名',//反担保人姓名
            //     cardType: '',//证件类型
            //     idCard: '2222',//证件号 
            //     relationship: '',//关系说明
            //     mobile: '173',//联系电话
            //     telephone: '083',//固定电话
            //     address: '通讯地址',//通讯地址
            //     maritalStatus: '0',//婚姻状态0-未婚，1-已婚，2-离异，3-丧偶
            // }
        ],
        otherList: [
            // {
            //     rest: '',
            // }
        ],
        other: '',
    },



}
export default defineComponent({
    name: '',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        vars: {
            type: Object,
            default: {}
        },
        isAudit: {
            type: Boolean,
            default: false
        }
    },
    components: {
        CloseBold
    },
    setup(props: any) {
        const data: rzFdbxxlrType = reactive({
            name: '反担保信息录入',
            subTitle: '',
            status: true,
            model: copy(model),
            fields: [
                {
                    label: "抵/质押人名称",
                    prop: 'mortgager',
                    placeholder: '请输入抵/质押人名称',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "抵/质押人类型",
                    prop: 'customerType',
                    placeholder: '请选择抵/质押人类型',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "法定代表人",
                    prop: 'legalPerson',
                    placeholder: '请输入法定代表人',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "土地使用权取得方式",
                    prop: 'useRight',
                    placeholder: '请输入土地使用权取得方式',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "反担保方式",
                    prop: 'mode',
                    placeholder: '请选择反担保方式',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "用途",
                    prop: 'useType',
                    placeholder: '请输入用途',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "结构",
                    prop: 'structure',
                    placeholder: '请输入结构',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "通讯地址",
                    prop: 'contactAddress',
                    placeholder: '请输入通讯地址',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "房产地址",
                    prop: 'propertyAddress',
                    placeholder: '请输入房产地址',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "面积",
                    prop: 'area',
                    placeholder: '请输入面积',
                    type: 'input',
                    labelWidth: '200px',
                    unit: 'm²',
                    disabled: false,
                },
                {
                    label: "协商价值",
                    prop: 'negotiateValue',
                    placeholder: '请输入协商价值',
                    type: 'input',
                    labelWidth: '200px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "抵押率",
                    prop: 'mortgageRate',
                    placeholder: '请输入抵押率',
                    type: 'input',
                    labelWidth: '200px',
                    unit: '%',
                    disabled: false,
                },
                {
                    label: "抵押价值",
                    prop: 'mortgageValue',
                    placeholder: '请输入抵押价值',
                    type: 'input',
                    labelWidth: '200px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "产权",
                    prop: 'propertyCode',
                    placeholder: '请输入产权',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "保险",
                    prop: 'insurance',
                    placeholder: '请输入保险',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "公证",
                    prop: 'notary',
                    placeholder: '请输入公证',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "抵押权",
                    prop: 'mortgageRight',
                    placeholder: '请输入抵押权',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "房屋使用情况",
                    prop: 'useMode',
                    placeholder: '请输入房屋使用情况',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "备注",
                    prop: 'remark',
                    placeholder: '请输入备注',
                    type: 'textarea',
                    labelWidth: '200px',
                    disabled: false,
                },
            ],
            options: {
                customerType: [
                    {
                        name: '自然人',
                        id: 1
                    },
                    {
                        name: '法人',
                        id: 2
                    },
                ],
                useMode: [

                ],
                mode: [],
                relation: [],
                maritalStatus: [
                    {
                        name: '未婚',
                        id: '0'
                    },
                    {
                        name: '已婚',
                        id: '1'
                    },
                    {
                        name: '离异',
                        id: '2'
                    },
                    {
                        name: '丧偶',
                        id: '3'
                    },
                ],
                relationship: [],
                cardType: [],
            },
            fields1: [
                {
                    label: "抵/质押人名称",
                    prop: 'mortgager',
                    placeholder: '请输入抵/质押人名称',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "身份证号/统一社会信用代码",
                    prop: 'cardNo',
                    placeholder: '请输入身份证号/统一社会信用代码',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "反担保方式",
                    prop: 'mode',
                    placeholder: '请选择反担保方式',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "联系电话",
                    prop: 'mobile',
                    placeholder: '请输入联系电话',
                    type: 'number',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "出质股权股数",
                    prop: 'sellNumber',
                    placeholder: '请输入出质股权股数',
                    type: 'number',
                    labelWidth: '200px',
                    unit: '万股',
                    disabled: false,
                },
                {
                    label: "股权所属公司",
                    prop: 'equityCompanyOwner',
                    placeholder: '请输入股权所属公司',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "通讯地址",
                    prop: 'address',
                    placeholder: '请输入通讯地址',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {},
                {
                    label: "备注",
                    prop: 'remark',
                    placeholder: '请输入备注',
                    type: 'textarea',
                    labelWidth: '200px',
                    disabled: false,
                },
            ],
            fields2: [
                {
                    label: "抵/质押人名称",
                    prop: 'mortgager',
                    placeholder: '请输入抵/质押人名称',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "抵/质押人类型",
                    prop: 'customerType',
                    placeholder: '请选择抵/质押人类型',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "法定代表人",
                    prop: 'legalPerson',
                    placeholder: '请输入法定代表人',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "评估值",
                    prop: 'evaluate',
                    placeholder: '请输入评估值',
                    type: 'input',
                    labelWidth: '200px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "反担保方式",
                    prop: 'mode',
                    placeholder: '请选择反担保方式',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "权属证书及编号",
                    prop: 'ownershipCertificate',
                    placeholder: '请输入权属证书及编号',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "通讯地址",
                    prop: 'address',
                    placeholder: '请输入通讯地址',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {},
                {
                    label: "备注",
                    prop: 'remark',
                    placeholder: '请输入备注',
                    type: 'textarea',
                    labelWidth: '200px',
                    disabled: false,
                },
            ],
            rules: {
                mortgager: [
                    { required: true, message: '请输入抵/质押人名称', trigger: 'blur' },
                ],
                customerType: [
                    { required: true, message: '请选择抵/质押人类型', trigger: 'change' },
                ],
                legalPerson: [
                    { required: true, message: '请输入法定代表人', trigger: 'blur' },
                ],
                // useRight: [
                //     { required: true, message: '请输入土地使用权取得方式', trigger: 'blur' },
                // ],
                mode: [
                    { required: true, message: '请选择反担保方式', trigger: 'change' },
                ],
                useType: [
                    { required: true, message: '请输入用途', trigger: 'blur' },
                ],
                structure: [
                    { required: true, message: '请输入结构', trigger: 'blur' },
                ],
                contactAddress: [
                    { required: true, message: '请输入通讯地址', trigger: 'blur' },
                ],
                propertyAddress: [
                    { required: true, message: '请输入房产地址', trigger: 'blur' },
                ],
                area: [
                    { required: true, message: '请输入面积', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '面积格式不正确' }
                ],
                negotiateValue: [
                    { required: true, message: '请输入协商价值', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '协商价值格式不正确' }
                ],
                mortgageRate: [
                    { required: true, message: '请输入抵押率', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '抵押率格式不正确' }
                ],
                mortgageValue: [
                    { required: true, message: '请输入抵押价值', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '抵押价值格式不正确' }
                ],
                propertyCode: [
                    { required: true, message: '请输入产权', trigger: 'blur' },
                ],
                useMode: [
                    { required: true, message: '请输入房屋使用情况', trigger: 'blur' },
                ],
            },
            rules1: {
                mortgager: [
                    { required: true, message: '请输入抵押人名称', trigger: 'blur' },
                ],
                cardNo: [
                    { required: true, message: '请输入身份证号/统一社会信用代码', trigger: 'blur' },
                    { pattern: NUMENGLISH_REG, message: '格式不正确' },
                    { min: 18, max: 18, message: '身份证号/统一社会信用代码长度不正确' }
                ],
                mobile: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系电话格式不正确' }
                ],
                mode: [
                    { required: true, message: '请选择反担保方式', trigger: 'change' },
                ],
                sellNumber: [
                    { required: true, message: '请输入出质股权股数', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '出质股权股数格式不正确' }
                ],
                equityCompanyOwner: [
                    { required: true, message: '请输入股权所属公司', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入通讯地址', trigger: 'blur' },
                ],
            },
            rules2: {
                mortgager: [
                    { required: true, message: '请输入抵/质押人名称', trigger: 'blur' },
                ],
                customerType: [
                    { required: true, message: '请选择抵/质押人类型', trigger: 'change' },
                ],
                legalPerson: [
                    { required: true, message: '请输入法定代表人', trigger: 'blur' },
                ],
                evaluate: [
                    { required: true, message: '请输入评估值', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '格式不正确' }
                ],
                mode: [
                    { required: true, message: '请选择担保方式', trigger: 'change' },
                ],
                ownershipCertificate: [
                    { required: true, message: '请输入权属证书及编号', trigger: 'blur' },
                    // { pattern: NUMENGLISH_REG, message: '格式不正确' }
                ],
                address: [
                    { required: true, message: '请输入通讯地址', trigger: 'blur' },
                ],
            },
            fields3: [
                {
                    label: "企业名称",
                    prop: 'companyName',
                    placeholder: '请输入企业名称',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "所属区域",
                    prop: 'area',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "关系说明",
                    prop: 'relation',
                    placeholder: '请输入关系说明',
                    type: 'input',
                    // bindLabel: 'name',
                    // bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "注册资金",
                    prop: 'registeredCapital',
                    placeholder: '请输入注册资金',
                    type: 'input',
                    labelWidth: '200px',
                    unit: '元',
                    disabled: false,
                },
                {
                    label: "法定代表人",
                    prop: 'legalPerson',
                    placeholder: '请输入法定代表人',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "联系人",
                    prop: 'relationPerson',
                    placeholder: '请输入联系人',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "联系电话",
                    prop: 'mobile',
                    placeholder: '请输入联系电话',
                    type: 'number',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "通讯地址",
                    prop: 'address',
                    placeholder: '请输入通讯地址',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
            ],
            length: 3,
            districts: [],
            areaProps: {
                multiple: false,
                value: 'name',
                label: 'name',
                children: 'districts'
            },
            rules3: {
                companyName: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' },
                ],
                area: [
                    { required: true, message: '请选择所属区域', trigger: 'blur' },
                ],
                relation: [
                    { required: true, message: '请输入关系说明', trigger: 'blur' },
                ],
                registeredCapital: [
                    { required: true, message: '请输入注册资金', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '格式不正确' }
                ],
                legalPerson: [
                    { required: true, message: '请输入法定代表人', trigger: 'blur' },
                ],
                relationPerson: [
                    { required: true, message: '请输入联系人', trigger: 'blur' },
                ],
                mobile: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系电话格式不正确' }
                ],
                address: [
                    { required: true, message: '请输入通讯地址', trigger: 'blur' },
                ],
            },
            fields4: [
                {
                    label: "反担保人姓名",
                    prop: 'name',
                    placeholder: '请输入反担保人姓名',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "证件类型",
                    prop: 'cardType',
                    placeholder: '请选择证件类型',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "证件号码",
                    prop: 'idCard',
                    placeholder: '请输入证件号码',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "关系说明",
                    prop: 'relationship',
                    placeholder: '请选择关系说明',
                    type: 'input',
                    // bindLabel: 'name',
                    // bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "联系电话",
                    prop: 'mobile',
                    placeholder: '请输入联系电话',
                    type: 'number',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "固定电话",
                    prop: 'telephone',
                    placeholder: '请输入固定电话',
                    type: 'number',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "通讯地址",
                    prop: 'address',
                    placeholder: '请输入通讯地址',
                    type: 'input',
                    labelWidth: '200px',
                    disabled: false,
                },
                {
                    label: "婚姻状况",
                    prop: 'maritalStatus',
                    placeholder: '请选择婚姻状况',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                    labelWidth: '200px',
                    disabled: false,
                },
            ],
            rules4: {
                name: [
                    { required: true, message: '请输入反担保人姓名', trigger: 'blur' },
                ],
                cardType: [
                    { required: true, message: '请选择证件类型', trigger: 'blur' },
                ],
                idCard: [
                    { required: true, message: '请输入证件号', trigger: 'blur' },
                    { pattern: NUMENGLISH_REG, message: '格式不正确' }
                ],
                relationship: [
                    { required: true, message: '请输入关系说明', trigger: 'blur' },
                ],
                mobile: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { pattern: PHONE_REG, message: '联系电话格式不正确' }
                ],
                // telephone: [
                //     { pattern: PHONE_REG, message: '固定电话格式不正确' }
                // ],
                address: [
                    { required: true, message: '请输入通讯地址', trigger: 'blur' },
                ],
                // maritalStatus: [
                //     { required: true, message: '请选择婚姻状态', trigger: 'blur' },
                // ],
            },
            fields5: [
                {
                    label: "说明",
                    prop: 'rest',
                    placeholder: '请输入说明',
                    type: 'textarea',
                    labelWidth: '200px',
                    disabled: false,
                },
            ],
            // rules5: {
            //     // rest: [
            //     //     { required: true, message: '请输入说明', trigger: 'blur' },
            //     // ],
            // },
            fields6: [],
            id: '',
            isReset: 2,
        })
        const router = useRouter()
        const form = ref([])
        onBeforeMount(() => {
            data.districts = JSON.parse(<string>localStorage.getItem('districts'))
            methods.getData()
            data.status = props.isEnabled == 0 ? false : true
        })
        const methods = {
            //获取自定义表单
            getData() {
                dictDetailAll({ ids: ['COUNTER_GUA_MODE'] }).then((res: any) => {
                data.options.mode=res.COUNTER_GUA_MODE
                })
               
                formGet({ tag: 'rzFdbxxlr' }).then((res: any) => {
                    data.id = res.id
                    data.name = res.name
                    data.isReset = res.isReset
                    if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                    data.subTitle = res.subTitle
                    let formStruct = JSON.parse(res.formStruct)
                    formStruct.formFields.map((item: any) => {
                        data.model.counterGuaranteeMessage[item.prop] = ''
                    })
                    data.fields6 = formStruct.formFields
                    data.fields.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields1.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields2.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields3.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields4.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields5.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields6.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    if (props.vars) {
                        const localData = props.vars
                        if (localData.counterGuaranteeMessage) {
                            for (let key in data.model.counterGuaranteeMessage) {
                                if (localData.counterGuaranteeMessage[key] != null) {
                                    data.model.counterGuaranteeMessage[key] = localData.counterGuaranteeMessage[key]
                                }
                            }
                            data.model.counterGuaranteeMessage.otherList = localData.counterGuaranteeMessage.otherList || []
                            data.model.counterGuaranteeMessage.personalLiability = localData.counterGuaranteeMessage.personalLiability || []
                            data.model.counterGuaranteeMessage.property = localData.counterGuaranteeMessage.property || []
                            data.model.counterGuaranteeMessage.third = localData.counterGuaranteeMessage.third || []
                            data.model.counterGuaranteeMessage.charging = localData.counterGuaranteeMessage.charging || []
                            data.model.counterGuaranteeMessage.equity = localData.counterGuaranteeMessage.equity || []
                        }
                      
                        data.model.counterGuaranteeMessage.personalLiability.map((item => {
                            if (item.maritalStatus != null) {
                                item.maritalStatus = String(item.maritalStatus)
                            }
                        }))

                    }
                    let arr = formStruct.formFields.filter((item: any) => {
                        return item.type == 'select'
                    })
                    let ids = arr.map((item: any) => {
                        return item.prop
                    })
                    if (ids.length == 0) return
                    listByParentArr({ ids: ids }).then((res: any) => {
                        ids.map((item: any) => {
                            data.options[item] = res[item]
                        })
                    })
                })
                listByParentArr({ ids: ['HOUSE_USED_TYPE', 'ID_CARD_TYPE'] }).then((res: any) => {
                    data.options.useMode = res.HOUSE_USED_TYPE
                    // data.options.relation = data.options.relationship = res.RELATIONSHIP_TYPE
                    data.options.cardType = res.ID_CARD_TYPE
                })
               
            },
            //添加房产
            addHours() {
                data.model.counterGuaranteeMessage.property.push({
                    mortgager: '',//抵押人名称
                    customerType: '',//抵押人类型1-自然人，2-法人
                    legalPerson: '',//法定代表人
                    useRight: '',//土地使用权取得方式
                    mode: '',
                    useType: '',//用途
                    structure: '',//结构
                    contactAddress: '',//通讯地址
                    propertyAddress: '',//房产地址
                    area: '',//面积
                    negotiateValue: '',//协商价值
                    mortgageRate: '',//抵押率
                    mortgageValue: '',//抵押价值
                    propertyCode: '',//产权
                    insurance: '',//保险
                    notary: '',//公证
                    mortgageRight: '',//抵押权
                    useMode: '',//房屋使用情况
                    remark: '',//备注
                    isReview: 1
                })
            },
            //删除房产
            deleteHours(index: number) {
                data.model.counterGuaranteeMessage.property.splice(index, 1)
            },
            //添加股权
            addShareholding() {
                data.model.counterGuaranteeMessage.equity.push(
                    {
                        mortgager: '',//抵押人名称 
                        cardNo: '',//身份证号/统一社会信用代码
                        mode: '',
                        mobile: '',//联系电话
                        sellNumber: '',//出质股权股数
                        equityCompanyOwner: '',//股权所属公司
                        address: '',//通讯地址
                        remark: '',//备注
                        isReview: 1
                    }
                )
            },
            //删除股权
            deleteShareholding(index: number) {
                data.model.counterGuaranteeMessage.equity.splice(index, 1)
            },
            //添加收费权
            addCharging() {
                data.model.counterGuaranteeMessage.charging.push(
                    {
                        mortgager: '',//抵押人名称
                        customerType: '',////抵押人类型1-自然人，2-法人
                        legalPerson: '',//法人姓名
                        evaluate: '',//评估值
                        mode: '',//担保方式
                        ownershipCertificate: '',//权属证书及编号
                        address: '',//地址
                        remark: '',//备注
                        isReview: 1
                    }
                )
            },
            //删除收费权
            deleteCharging(index: number) {
                data.model.counterGuaranteeMessage.charging.splice(index, 1)
            },
            //添加第三方保证
            addThirdParty() {
                data.model.counterGuaranteeMessage.third.push({
                    companyName: '',//公司名称
                    area: '',//所属区域
                    relation: '',//关系说明
                    registeredCapital: '',// 公司注册资本
                    legalPerson: '',//法人姓名
                    relationPerson: '',//联系人
                    mobile: '',//联系人手机号
                    address: '',//通讯地址
                    isReview: 1
                })
            },
            //删除第三方保证
            deleteThirdParty(index: number) {
                data.model.counterGuaranteeMessage.third.splice(index, 1)
            },
            //添加个责
            addResponsibility() {
                data.model.counterGuaranteeMessage.personalLiability.push({
                    name: '',//反担保人姓名
                    cardType: '',//证件类型
                    idCard: '',//证件号 
                    relationship: '',//关系说明
                    mobile: '',//联系电话
                    telephone: '',//固定电话
                    address: '',//通讯地址
                    maritalStatus: '',//婚姻状态0-未婚，1-已婚，2-离异，3-丧偶
                    isReview: 1
                })
            },
            //删除个责
            deleteResponsibility(index: number) {
                data.model.counterGuaranteeMessage.personalLiability.splice(index, 1)
            },
            //添加其他
            addOther() {
                data.model.counterGuaranteeMessage.otherList.push({
                    rest: ""
                })
            },
            //删除其他
            deleteOther(index: number) {
                data.model.counterGuaranteeMessage.otherList.splice(index, 1)
            },
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            //清除表单数据
            clearForm() {
                data.model = copy(model)
            },
            resultData() {
                let arr = []
                return new Promise((resolve, reject) => {
                    let arr = []

                    if (form.value.length > 0) {
                        form.value.map((item: any, index: number) => {
                            item.verification().then((res: any) => {
                                arr.push(true)

                            }).catch((err: any) => {
                                arr.push(false)
                                reject(false)
                            })
                        })
                        setTimeout(() => {
                            if (arr.length == form.value.length && arr.every((item1: any) => item1)) {
                                let other = data.model.counterGuaranteeMessage.otherList.map((em: any) => {
                                    return em.rest
                                })
                                data.model.counterGuaranteeMessage.other = other.join(',')
                                resolve(data.model)
                            }
                        }, 100)
                    } else {
                        resolve(data.model)
                    }
                })
            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
        }
        // 监听props的变化
        watch(() => data.model, (newValue, oldValue) => {
            if (newValue) {
                data.length = data.model.counterGuaranteeMessage.property.length + data.model.counterGuaranteeMessage.equity.length + data.model.counterGuaranteeMessage.charging.length

            }
        }, { immediate: true, deep: true });
        return {
            ...toRefs(data),
            ...methods, form
        }
    }
})
</script>
<style scoped lang='scss'>
.add {
    border: 1px solid #1878FF;
    background: #EBF3FF;
    padding: 0px 15px;
    height: 24px;
    font-size: 12px;
    border-radius: 100px;
    color: #1878FF;
    margin-left: 16px;
    cursor: pointer;

    .size {
        font-size: 18px !important;
        margin-right: 5px;
        line-height: 20px;
    }
}

.tips {
    color: #1878FF;
    font-size: 15px;
}
</style>
<style lang="scss">
.rzFdbxxlr {
    .el-form-item {
        width: 50% !important;
        margin-right: 0px !important;

        .el-form-item__content {
            width: calc(100% - 200px) !important;

            .el-input,
            .el-cascader,
            .el-select {
                width: 100% !important;
            }
        }
    }
}
.shareholding_form{
    .el-form-item:nth-child(9){
        width: 100% !important;;
    }
}
.realEstate_form{
    .el-form-item:nth-child(19){
        width: 100% !important;;
    }
}
.fields5 {
    .el-form-item {
        width: 100% !important;
    }
}
</style>